<template>
	<view>
		<u-navbar title="创作" title-color="#fff" back-icon-color="#fff" :immersive="false"
			:background="background"></u-navbar>
		<!-- <view class="flex-row justify-center" style="margin-top: 100rpx;">
			<view class="" style="width: 318rpx;height: 516rpx;margin-right: 40rpx;">
					<video :src="originalVideoUrl" object-fit="contain" style="width: 100%;height:100%;"></video>
					<view class="flex-row justify-center" style="color: #fff;margin-top: 42rpx;margin-bottom: 31rpx;">
						原视频
					</view>
					<view class=" flex-row justify-center">
						<view @click="downloadVideo(1)" class="bottom-btn">
							下载视频
						</view>
					</view>
				</view>
				<view class="" style="width: 318rpx;height: 516rpx;">
					<video :src="videoUrl" object-fit="contain" style="width: 100%;height:100%;"></video>
					<view class="flex-row justify-center" style="color: #fff;margin-top: 42rpx;margin-bottom: 31rpx;">
						合成视频
					</view>
					<view class=" flex-row justify-center">
						<view @click="downloadVideo(2)" class="bottom-btn">
							下载视频
						</view>
					</view>
				</view> 
				
			</view>-->
			 <!-- style="height: 20vh;" -->
		<view class="" style="width: 98%;height: 100%;margin: 0 auto;margin-bottom: 23rpx;height: 194rpx;">
			<u-swiper :list="list" :autoplay="false" mode="none" border-radius="0" img-mode="widthFix" bg-color="rgba(0,0,0,0)"></u-swiper>
		</view>

		<view class="flex-row justify-between" style="width: 98%;margin: 0 auto;">
			<view class="" style="width: 49.5%;border-radius: 16rpx;">
				<video :src="originalVideoUrl" object-fit="cover" style="width: 100%;height: 40vh;border-radius: 16rpx 16rpx 0 0;"></video>
				<!-- <view class="flex-row justify-center" style="color: #fff;margin-top: 42rpx;margin-bottom: 31rpx;">
					原视频
				</view>
				<view class=" flex-row justify-center">
					<view @click="downloadVideo(1)" class="bottom-btn">
						下载视频
					</view>
				</view> -->
				<image src="https://terminator.axu9.com/images/video-detail-yuan.png" mode="widthFix" style="width: 100%;"></image>
			</view>
			<view class="" style="width: 49.5%;border-radius: 16rpx;">
				<video :src="videoUrl" object-fit="cover" style="width: 100%;height: 40vh;border-radius: 16rpx 16rpx 0 0;"></video>
				<!-- <view class="flex-row justify-center" style="color: #fff;margin-top: 42rpx;margin-bottom: 31rpx;">
					合成视频
				</view>
				<view class=" flex-row justify-center">
					<view @click="downloadVideo(2)" class="bottom-btn">
						下载视频
					</view>
				</view> -->
				<image src="https://terminator.axu9.com/images/video-detail-ai.png" mode="widthFix" style="width: 100%;"></image>
			</view>
		</view>
		<view class="" style="width: 100%;">
			<image src="https://terminator.axu9.com/images/video-detail-footer.png" mode="widthFix" style="width: 100%;"></image>
		</view>
		<!-- 下载视频进度条弹窗 -->
		<progressPop ref="progressPop" :isShow="false" :percent="percent" @cancel="showProgressCancel"></progressPop>
	</view>
</template>

<script>
	import progressPop from "../../components/progressPop/index.vue";
	export default {
		data() {
			return {
				list: [
					{
						image: 'https://terminator.axu9.com/images/video-detail-banner1.png',
					},
					{
						image: 'https://terminator.axu9.com/images/video-detail-banner2.png',
					},
					{
						image: 'https://terminator.axu9.com/images/video-detail-banner3.png',
					}
				],
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				videoUrl: '',
				originalVideoUrl: '',
				percent: 0,
				downloadTask: null, //上传视频任务
			}
		},
		components: {
			progressPop
		},
		onLoad(options) {
			console.log(options, 'options')
			this.videoUrl = options.videoUrl;
			this.originalVideoUrl = options.originalVideoUrl;
			
			uni.setNavigationBarColor({
			      backgroundColor:'#ffffff',
			      frontColor:'#ffffff',
			})

			// if (!uni.getStorageSync("userId")) {
			// 	uni.hideShareMenu({
			// 		menus: ['shareAppMessage']
			// 	})
			// } else {
			// 	uni.showShareMenu({
			// 		withShareTicket: true,
			// 		menus: ['shareAppMessage']
			// 	})
			// }
			// if (JSON.stringify(options) != '{}' && options.id) {
			// 	console.log('走了么')
			// 	uni.setStorageSync("parentId", options.id)
			// }
		},
		// onShareAppMessage: function(res) {
		// 	let userId = uni.getStorageSync("userId") ? uni.getStorageSync("userId") : ''
		// 	return {
		// 		title: '创作', // 分享标题  
		// 		path: '/pagesHome/videoDetail/index?id=' + userId, // 分享路径，可以带参数  
		// 		success: function(res) {
		// 			// 设置成功  
		// 		},
		// 		fail: function(res) {
		// 			// 设置失败  
		// 		}
		// 	}
		// },
		// onShareTimeline(){},//分享朋友圈
		methods: {
			showProgressCancel() {
				// console.log('关闭上传弹窗')
				// this.downloadTask.abort();
				// this.downloadTask = null;
				this.$refs.progressPop.close();

			},
			// 下载视频
			downloadVideo(type) {
				this.$isAuthorize('scope.writePhotosAlbum', {
					title: '保存视频权限',
					content: '为了将视频保存到您的相册，我们需要获取相应的存储权限。请允许我们访问您的存储，以便我们能够正确保存视频。'
				}).then(res => {
					console.log(res, '授权')
					if (res == true) {
						// 已授权
						console.log('已授权')
						// recorderManager.start();
						this.downloadVideoAuthSuccess(type)
					} else {
						// 未授权打开授权
						console.log('未授权')
					}
				})

			},
			// 下载视频
			downloadVideoAuthSuccess(type) {
				var _this = this;
				uni.showLoading({
					title: '下载中'
				})
				_this.downloadTask = uni.downloadFile({
					url: type == 1 ? this.originalVideoUrl : this.videoUrl,
					success: function(res) {
						uni.hideLoading();
						var filePath = res.tempFilePath;
						console.log(res, 'reeeeee')
						uni.saveVideoToPhotosAlbum({
							filePath: res.tempFilePath,
							success: res => {
								uni.hideLoading()
								uni.showToast({
									title: "保存成功",
									duration: 2000,
								})
								setTimeout(() => {
									_this.$refs.progressPop.close();
									_this.percent = 0;
								}, 1000)
							},
							fail() {
								uni.showToast({
									title: "保存失败",
									icon: 'none',
									duration: 2000,
								})
								_this.$refs.progressPop.close();
								_this.percent = 0;
							}
						})
					},
					fail: function(err) {
						uni.hideLoading();
						console.log(err, 'errr')
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						})
						_this.$refs.progressPop.close();
					}
				})
				_this.downloadTask.onProgressUpdate((res) => {

					if (res.progress > 0) {
						uni.hideLoading();
						_this.$refs.progressPop.open();
					}
					_this.percent = res.progress;
					if (_this.percent >= 100) {

						// setTimeout(() => {
						// 	_this.$refs.progressPop.close();
						// 	_this.percent = 0;
						// }, 1000)


					}
				})
			},
		}
	}
</script>
<style lang="less" scoped>
	/deep/ .u-drawer-bottom {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
	/deep/ .u-swiper-wrap {
		width: 100% !important;
		height: 100% !important;
	}
	/deep/ .u-swiper-wrap swiper {
		width: 100% !important;
		height: 100% !important;
	}
</style>
<style>
	@import url(../../static/css/common.css);

	page {
		background-color: #000000;
	}

	.bottom {
		position: fixed;
		bottom: 80rpx;
		left: 0;
		width: 100%;
	}

	.bottom-btn {
		width: 205rpx;
		height: 65rpx;
		line-height: 65rpx;
		text-align: center;
		background-image: linear-gradient(90deg, #00ccbb 0%, #00e586 100%);
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;

	}
</style>